<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">

        <a-row :gutter="24" style="padding-top: 0px">
          <a-col :md="6" :sm="8">
            <a-form-item label="工单号" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
              <a-input placeholder="工单号" v-model="queryParam.woNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="18" :sm="16">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="showOrClose" icon="search" style='margin-left: 10px;'>高级查询</a-button>
               <a-button type="primary" icon="download" @click="handleExportXls('eip_operation')" style='margin-left: 10px;'>导出</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-row v-if="show">
      <a-col :md="6" :sm="8">
        <a-form-item label="产品型号" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
          <a-input placeholder="产品型号" v-model="queryParam.productionModel"></a-input>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="种类编码" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
          <j-dict-select-tag style="width: 260px" v-model="queryParam.subclassCode" placeholder="请选择种类编码" dictCode="subclassCode"/>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="工序编码" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
          <a-input placeholder="工序编码" v-model="queryParam.processCode"></a-input>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="工序名称" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
          <a-input placeholder="工序名称" v-model="queryParam.processName"></a-input>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="计划日期（起）" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
          <a-date-picker valueFormat="YYYY-MM-DD" v-model="queryParam.planStartTimeBegin"></a-date-picker>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="计划日期（止）" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }">
          <a-date-picker valueFormat="YYYY-MM-DD" v-model="queryParam.planStartTimeFinish"></a-date-picker>
        </a-form-item>
      </a-col>
      <a-col :md="6" :sm="8">
        <a-form-item label="生产对象名称" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
          <a-input placeholder="生产对象名称" v-model="queryParam.manufacturedName"/>
        </a-form-item>
      </a-col>
    </a-row>
    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <!--      :scroll="{ x: 2000,y:700 }"/-->
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="index"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="ipagination"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <img v-if="record.remark1.indexOf('10001')>-1|| record.remark1.indexOf('10003')>-1" slot="pic" style="width: 20px;" slot-scope="text, record" src='../../../../assets/yellow.jpg' alt="">
        <img v-else slot="pic" style="width: 20px;" slot-scope="text, record" src='../../../../assets/green.jpg' alt="">

        <span slot="action" slot-scope="text, record">
          <a @click="toOperationDetail(record)">详情</a>
        </span>
      </a-table>

    </div>
    <eipOperation-detail v-if="showOperationDetail" ref="EipOperationDetail" :dataSourceDetail="dataSourceDetail" @close="closeDetail"/>
  </a-card>
</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import EipOperationDetail from '../../sjshjy/EipOperation/modules/EipOperationDetail'
  import { deleteAction, postAction, getAction, downFile } from '@/api/manage'

  export default {
    name: 'EipOperationList',
    mixins: [JeecgListMixin],
    components: {
      EipOperationDetail
    },
    data() {
      return {
        value: ['平高电器'],
        description: 'eip_operation管理页面',
        show: false,                    //高级查询
        showOperationDetail: false,     //详情
        planStartTimeBegin: null,
        planStartTimeFinish: null,
        dataSource: [],                 //列表数据
        dataSourceDetail: {},           //详细数据
        actualStartDate: null,          //计划开始时间
        actualFinishDate: null,         //计划结束时间
        modalWidth: '75%',
        tstyle: {
          'height': '700px',
          'overflow': 'auto'
        },
        loading: false,
        confirmLoading: false,
        // 列表数据表头
        columns: [
          {
            title: '状态',
            dataIndex: 'remark1',
            // fixed: 'left',
            key: 'pic',
            scopedSlots: { customRender: 'pic' }
          },
          {
            title: '供应商名称',
            align: 'center',
            dataIndex: 'supplierName'
          },
          {
            title: '工单号',
            align: 'center',
            dataIndex: 'woNo'
          },
          {
            title: '生产对象名称',
            align: 'center',
            dataIndex: 'manufacturedName'
          },
          {
            title: '工序名称',
            align: 'center',
            dataIndex: 'processName'
          },
          {
            title: '计划开始时间',
            align: 'center',
            dataIndex: 'planStartTime',
            customRender: function(text) {
              return !text ? '' : (text.length > 10 ? text.substr(0, 16) : text)
            }
          },
          {
            title: '计划结束时间',
            align: 'center',
            dataIndex: 'planEndTime',
            customRender: function(text) {
              return !text ? '' : (text.length > 10 ? text.substr(0, 16) : text)
            }
          },
          {
            title: '实际开始时间',
            align: 'center',
            dataIndex: 'actualStartDate',
            customRender: function(text) {
              return !text ? '' : (text.length > 10 ? text.substr(0, 16) : text)
            }
          },
          {
            title: '实际完成时间',
            align: 'center',
            dataIndex: 'actualFinishDate',
            customRender: function(text) {
              return !text ? '' : (text.length > 10 ? text.substr(0, 16) : text)
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],

        url: {
          list: '/eipOperation/list',
          selectByPuid: '/eipOperation/selectByPuid',
          exportXlsUrl: '/eipOperation/exportXls'
        },
        dictOptions: {}
      }
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },
    methods: {
      //高级查询是否展开
      showOrClose() {
        this.show = !this.show
      },
      //详情
      closeDetail() {
        this.showOperationDetail = false
      },
      //报工信息详情
      toOperationDetail(record) {
        this.showOperationDetail = true
        this.dataSourceDetail = record
      },
      handleEdit: function(record) {
        let params = { 'puid': record.puid }
        getAction(this.url.selectByPuid, params).then((res) => {
          record = res.result
          this.$refs.modalForm.edit(record)
          this.$refs.modalForm.title = '编辑'
          this.$refs.modalForm.disableSubmit = false
        })
      },
      //加载报工信息
      loadData(arg) {
        if (arg === 1) {
          this.ipagination.current = 1
        }
        let params = { 'pageNo': this.ipagination.current, 'pageSize': this.ipagination.pageSize }
        let puid = localStorage.getItem('puid')
        let insideNo = localStorage.getItem('insideNo')
        let woNo = localStorage.getItem('woNo')
        if (puid !== null) {
          this.queryParam.insideNo = insideNo
          params['puid'] = puid
          params['insideNo'] = insideNo
        } else if (woNo != null) {
          this.queryParam.woNo = woNo
          params['woNo'] = woNo
        } else {
          params = this.getQueryParams()//查询条件
        }
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
        localStorage.removeItem('puid')
        localStorage.removeItem('insideNo')
        localStorage.removeItem('woNo')
      }
    },
    watch: {
      value(val) {
        console.log(`selected:`, val)
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>